<template>
	<view class="bigView">
		<!-- 审批详情 -->
		<u-navbar :is-back="true" :border-bottom="false" title="审批详情" title-color="#fff" :title-size="40"
			backIconColor="#fff"></u-navbar>
		<view class="content">
			<view class="content_box">
				<view class='list'>
					<view class='phone'>
						<text>标题:</text>
						<text class="pad">{{detail.title}}</text>
					</view>
					<view class='phone rich_text'>
						<text>描述:</text>
						<text class="pad" v-if="richText">{{detail.desc}}</text>
						<rich-text class="pad" v-if="!richText" :nodes="detail.desc"></rich-text>
					</view>
					<view class='phone'>
						<text>提交人员:</text>
						<text class="pad">{{detail.user_name}}</text>
					</view>
					<view class='phone'>
						<text>提交时间:</text>
						<text class="pad">{{detail.created_at}}</text>
					</view>
					<view class='phone' v-if="appid==4||appid==5||appid==13">
						<text>金额:</text>
						<text class="pad">{{detail.money}}</text>
					</view>
					<view class='fileImg_list'>
						<view>图片</view>
						<view class="img_list">
							<view v-if="imgPath.length!=0">
								<image v-for="(item,index) in imgPath" :key="index" :src="item" @click="previewImage">
								</image>
							</view>
							<view v-else class="nothing_file">没有上传图片！</view>
						</view>
					</view>
					<view class='fileImg_list'>
						<view>文件</view>
						<view>
							<view v-if="filePath.length!=0" class="file_list">
								<view v-for="(item,index) in filePathName" :key="index" @click="fileDownload(item)">
									{{item}}
								</view>
							</view>
							<view v-else class="nothing_file">没有上传文件！</view>
						</view>
					</view>
					<!-- <view v-if="filePath==null">123</view> - filePath==null为真 -->
				</view>
				<view class="status" v-for="(item,index) in appPerson" :key="index">
					<view class="flex">
						<view class="img">
							<image src="../../static/img/349511562104384641.png" mode="widthFix" v-if="item.status==1">
							</image>
							<image src="../../static/img/349511562104384641.png" mode="widthFix" v-if="item.status==3">
							</image>
							<image src="../../static/img/780252898117655437.png" mode="widthFix"
								v-else-if="item.status==-1"></image>
							<image src="../../static/img/blue.png" mode="widthFix" v-else-if="item.status==0">
							</image>
							<image src="../../static/img/7db339a9e92f8f1df34a57ca53eaeca.png" mode="widthFix"
								v-else-if="item.status==2"></image>
						</view>
						<view class="bus">[ 审批人员 ]：{{item.re_name}}</view>
					</view>
					<view class="buss">
						<view>[ 审批状态 ] ：<text v-if="item.status==1">已通过</text>
							<text v-else-if="item.status==-1">已驳回</text>
							<text v-else-if='item.status==0'>待审批</text>
							<text v-else-if='item.status==2'>审核中</text>
							<text v-else-if='item.status==3'>已完成</text>
						</view>
						<text>[ 审批时间 ]：{{item.send_time}}</text>
						<view v-if="item.reason">[ 驳回理由 ]：{{item.reason}}</view>
					</view>
				</view>
				<view v-if="detailStatusShowHide">
					<view class="text">
						<textarea class="text1" placeholder='请输入理由...' v-model="feedbackContent"></textarea>
					</view>
					<view class="butt">
						<button class="color2" @click="getUserInfo()">通过</button>
						<button @click="submitFeedback(detail)" class="color1">驳回</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 自定义模态框 -->
		<u-mask :show="show" @click="show = false">
			<view class="defineDialog" @tap.stop>
				<view class="dialogContent">
					<view>是否通过该申请</view>
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox v-model="checkbox.through" name="是否通过" active-color="#899EF7" size="25"
							label-size="27">
							通过
						</u-checkbox>
						<view v-if="appid==4||appid==5||appid==13">
							<u-checkbox v-if="roleId!=6" v-model="checkbox.subSuperior" name="提交上级"
								active-color="#899EF7" size="25" label-size="27" :disabled="checkboxDisabled">提交上级审核？
							</u-checkbox>
						</view>
						<view v-else>
							<u-checkbox v-if="userPid!=0" v-model="checkbox.subSuperior" name="提交上级"
								active-color="#899EF7" size="25" label-size="27" :disabled="checkboxDisabled">提交上级审核？
							</u-checkbox>
						</view>
					</u-checkbox-group>
				</view>
				<view class="dialogBtn">
					<u-button shape="square" @click="show=false" :hair-line="false">取消</u-button>
					<u-button shape="square" @click="btnSub" :hair-line="false" :plain="true" type="success">
						确定
					</u-button>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userFeedbackHidden: true, // 默认隐藏
				feedbackContent: '', // 用户反馈内容 - 输入框
				content: '确定提交吗?',
				detail: "", //申请数据
				appPerson: "", //审批人员

				// detailRe_name: "", //该审批人员的名字
				// accountRe_name: "", //账号人员的名字
				detailStatusShowHide: true, //审批后 - 按钮的显示\隐藏
				appid: "",

				show: false,
				checkbox: { //自定义弹出框选项
					through: true, //通过与否 - 默认选中就是true
					subSuperior: true //提交上级与否
				},
				checkboxDisabled: false, //复选框是否禁用

				imgPath: [], //detail中申请人上传的图片 - accessUrl:预览地址，downLoadUrl:下载地址
				filePath: [], //detail中申请人上传的文件
				filePathName: [],

				userPid: "", //用户等级 - pid
				richText: true, // 控制描述的显示 - desc
				roleId: "", // 判断是都为财务，隐藏提交 - 6
			}
		},
		onLoad(e) {
			// 拿到首页存储的用户pid
			this.userPid = uni.getStorageSync('userPid');
			let item = JSON.parse(e.item)
			this.appid = item.apply.app_id
			// 接口获取数据
			this.$http(this.$api.businessXq, {
				apply_id: item.apply_id
			}).then(res => {
				// console.log(res, '申请详情数据');
				this.appPerson = res.data.appPerson
				this.detail = res.data.detail
				this.roleId = res.data.role.role_id

				if (res.data.role.role_id == 6) {
					this.checkbox.subSuperior = false //取消向上提交
				}
				if (this.appid == 4 || this.appid == 5 || this.appid == 13) {
					console.log('财务类！必须向上提交！除非为财务类！');
				} else {
					if (this.userPid == 0) {
						this.checkbox.subSuperior = false //取消向上提交
					}
				}
				if (res.data.detail.desc.includes('<')) {
					this.richText = false
				} else {
					this.richText = true
				}
				let detailRe_name = res.data.detail.applyLog[0].re_name //这次要审批的人员名称
				let accountRe_name = uni.getStorageSync('real_name') //账号的人员名称
				let detailStatus = res.data.detail.applyLog[0].status

				this.imgPath = res.data.detail.img_path
				this.filePath = res.data.detail.file_path
				if (res.data.detail.file_path.length != 0) {
					res.data.detail.file_path.forEach(item => {
						let a = item.split('/')
						this.filePathName.push(a[3])
					})
				}

				if (detailRe_name == accountRe_name) {
					if (detailStatus == 0) {
						this.detailStatusShowHide = true
					} else {
						this.detailStatusShowHide = false
					}
				} else {
					this.detailStatusShowHide = false
				}
			})
		},
		methods: {
			checkboxGroupChange(e) { //获得自定义模态框的选值
				// console.log(e, '复选框');
				// console.log(this.checkbox);
			},
			btnSub() { //模态框确认按钮
				// console.log(this.detail);
				// return
				// let logId = ""
				// this.detail.applyLog.forEach((item) => {
				// 	if (item.status == 0) {
				// 		// console.log(item.id);
				// 		// console.log(item);
				// 		logId = item.id
				// 	}
				// })
				if (this.checkbox.through && this.checkbox.subSuperior == false) { //通过，但不提交
					// console.log('通过，但不提交');
					this.$http(this.$api.throughRejected, {
						id: this.detail.id,
						// id: this.detail.applyLog[0].apply_id,
						// id: this.detail.applyLog[0].id,
						// id: logId,
						is_next: 0, //0不提交，1提交
						status: 1 //通过是1、驳回是0
					}).then(res => {
						uni.showToast({
							title: res.msg,
							icon: "none",
							mask: true
						})
						this.show = false
						setTimeout(() => {
							uni.navigateBack()
						}, 600)
					})
				} else if (this.checkbox.through && this.checkbox.subSuperior) { //通过和提交上级
					// console.log('通过和提交上级');
					this.$http(this.$api.throughRejected, {
						id: this.detail.id,
						// id: this.detail.applyLog[0].apply_id,
						// id: this.detail.applyLog[0].id,
						// id: logId,
						is_next: 1, //0不提交，1提交
						status: 1 //通过是1、驳回是0
					}).then(res => {
						uni.showToast({
							title: res.msg,
							icon: "none",
							mask: true
						})
						this.show = false
						setTimeout(() => {
							uni.navigateBack()
						}, 600)
					})
				} else if (this.checkbox.through == false && this.checkbox.subSuperior == false) { //即不通过，也不提交
					// console.log('即不通过，也不提交');
					uni.showToast({
						title: "请继续审批！",
						icon: "none",
						mask: true
					})
				} else if (this.checkbox.through == false && this.checkbox.subSuperior) { //不通过，但提交上级
					// console.log('不通过，但提交上级');
					uni.showToast({
						title: "请批准后，再选择提交上级！",
						icon: "none",
						mask: true
					})
				}
			},
			getUserInfo() { //通过 - 唤起模态框
				this.show = true
			},
			submitFeedback(detail) { // 驳回反馈
				console.log(detail);
				if (!this.feedbackContent) {
					uni.showToast({
						title: "请输入驳回理由！",
						icon: "none"
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '是否驳回？',
						success: (res) => {
							if (res.confirm) {
								this.$http(this.$api.throughRejected, {
									id: this.detail.id,
									status: -1,
									reason: this.feedbackContent
								}).then(res => {
									uni.showToast({
										title: res.msg,
										icon: "none",
										mask: true
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 800)
								})
							} else {
								uni.showToast({
									title: "已取消驳回，请继续审批！",
									icon: "none"
								})
							}
						}
					})
				}
			},
			previewImage() { //预览图片
				uni.previewImage({
					urls: this.imgPath,
				})
			},
			fileDownload(item) { //下载文件
				let str1 = ""
				this.filePath.forEach(item2 => {
					let a = item2.split('/')
					if (item == a[3]) {
						str1 = item2
						console.log(str1, 'str1');
					}
				})
				uni.showLoading({
					title: "下载中！"
				})
				uni.downloadFile({
					url: str1,
					success: (res) => {
						uni.saveFile({
							tempFilePath: res.tempFilePath,
							success: (res) => {
								uni.hideLoading()
								uni.openDocument({
									filePath: res.savedFilePath,
									// fileType: "docx",
									success: (res) => {
										console.log(res, '打开成功');
									},
									fail: (err) => {
										console.log(err, '打开失败');
									}
								});
							},
							fail(err) {
								console.log(err, 'saveFile err');
							}
						});
					},
					fail(err) {
						console.log(err, 'downloadFile err');
					}
				});
			},
		},
		watch: {
			appid() { //如果与财务有关，必须向上提交
				if (this.appid == 4 || this.appid == 5 || this.appid == 13) {
					this.checkbox.subSuperior = true
					this.checkboxDisabled = true
				} else {
					// this.checkbox.subSuperior = false
					this.checkboxDisabled = false
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	u-checkbox-group /deep/view {
		display: flex;
		justify-content: center;
	}

	.rich_text {
		display: flex;
		align-items: center;
	}

	.fileImg_list {
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.fileImg_list>view:first-child {
		margin-bottom: 20rpx;
	}

	.img_list>view {
		display: flex;
		// justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	.img_list>view>image {
		display: block;
		width: 32%;
		height: 205rpx;
		object-fit: cover;
		margin: 0 1% 10rpx 0;
	}

	.file_list {
		line-height: 50rpx;
		color: #ccc;
		font-size: 25rpx;
		padding-left: 30rpx;
	}

	.nothing_file {
		padding-left: 40rpx;
		font-size: 25rpx;
	}


	* {
		padding: 0;
		margin: 0;
	}

	.content {
		padding: 10px;
		font-size: 14px;
	}

	.content_box {
		box-shadow: 0px 0px 6px #DCDCDC;
		border-radius: 5px;
		padding: 10px;
		margin-top: 25rpx;
	}

	.list {
		font-size: 32rpx;
	}

	.phone {
		background: #fff;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.pad {
		padding-left: 20px;
	}

	input {
		width: 75%;
	}

	.butt {
		display: flex;
		justify-content: space-around;
		color: #fff;
	}

	button {
		width: 47%;
	}

	.color1 {
		background-color: limegreen;
		color: #fff;
		margin: 30px 0;
		width: 300rpx;
		border-radius: 40px;
		border: 1px solid red;
		color: red;
		background-color: rgba(225, 0, 0, 0.3);
	}

	.color2 {
		margin: 30px 0;
		width: 300rpx;
		border-radius: 40px;
		border: 1px solid limegreen;
		color: limegreen;
		background-color: rgba(0, 225, 0, 0.3);
	}

	.status {
		line-height: 30px;
		padding-top: 20px;
	}

	.img {
		width: 50rpx;
		height: 50rpx;
	}

	.img image {
		width: 50rpx;
		height: 50rpx;
		display: inline;
	}

	.bus {
		font-size: 32rpx;
		padding-left: 15rpx;
	}

	.buss {
		color: #ccc;
		font-size: 14px;
		margin-left: 25rpx;
		padding-left: 40rpx;
		border-left: 1px solid #DCDCDC;
	}

	.flex {
		display: flex;
	}

	.text {
		border: 1px solid #ccc;
		margin: 20rpx 30rpx;
		height: 220rpx;
	}

	.text1 {
		padding: 30rpx;
	}

	// 自定义模态框
	.bigView {
		position: relative;
		height: 100vh;
	}

	.defineDialog {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 99;
		width: 85vw;
		height: 300rpx;
		background-color: #fff;
		box-shadow: 0 0 20rpx #82848a;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.dialogContent {
		height: 220rpx;
		padding: 10rpx;
	}

	.dialogContent>view {
		text-align: center;
		font-size: 35rpx;
		line-height: 110rpx;
	}

	u-checkbox-group {
		text-align: center;
	}

	u-checkbox-group /deep/ .u-checkbox {
		float: initial !important;
	}

	u-checkbox {
		margin-right: 20rpx;
	}

	u-checkbox:last-child {
		margin-right: 0;
	}

	.dialogBtn {
		border-top: #c8c9cc 1rpx solid;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.dialogBtn u-button {
		width: 50%;
	}

	u-button /deep/ .u-btn--bold-border {
		border: none !important;
		border-radius: 0;
	}
</style>
